<template>
    <div class="main-contain">
        <MsgCard
        v-for="group in GroupList" 
        :key="group.group_id"
        :group="group"
        ></MsgCard>
    </div>
</template>

<script setup>
import MsgCard from './MsgCard.vue';
import { getUserGroupList } from '../../api/user';
import {onMounted, reactive, ref } from 'vue';

const GroupList = ref([])

const LoadGroupList = async ()=>{
    const res =  (await getUserGroupList())
    GroupList.value = res.data['data']
}

onMounted(() => {
    LoadGroupList()
});

console.log(GroupList.value)




</script>
<style scoped>
.main-contain{
    position: fixed;
    left: 0;
    top:0;
    background-color: beige;
    width: 20%;
    height: 100%;
    overflow: scroll;
}
</style>